import HomePageQuesList from "../component/HomePage/HomePageQuesList";
import HomePagePagination from "../component/HomePage/HomePagePagination";
import BaseButton from "../component/BaseButton";
import {useAtom} from "jotai/index";
import {selectedRangeAtom, selectedTypeAtom, sortByCountDescAtom, sortByDifficultyDescAtom} from "../store/atoms";


function HomePage() {
    const [selectedType, setSelectedType] = useAtom(selectedTypeAtom);
    const [selectedRange, setSelectedRange] = useAtom(selectedRangeAtom);
    const handleRangeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedRange(e.target.value);
    }
    const handleTypeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedType(e.target.value);
    }
    const [sortByDifficultyDesc, setSortByDifficultyDesc] = useAtom(sortByDifficultyDescAtom);
    const [sortByCountDesc, setSortByCountDesc] = useAtom(sortByCountDescAtom);
    const handleDifficultyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSortByDifficultyDesc(e.target.checked);
    };
    const handleCountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setSortByCountDesc(e.target.checked);
    };
    return (
        <div>
            <div className="sticky top-0 bg-white h-14 flex items-center z-10">
                <div className="tabs tabs-box mr-2 font-bold">
                    <input onChange={handleRangeChange} checked={selectedRange === ''} value='' type="radio" name="ques_range" className="tab" aria-label="所有"/>
                    <input onChange={handleRangeChange} checked={selectedRange === '71-100'} value='71-100' type="radio" name="ques_range" className="tab" aria-label="简单题"/>
                    <input onChange={handleRangeChange} checked={selectedRange === '31-70'} value='31-70' type="radio" name="ques_range" className="tab" aria-label="中等题"/>
                    <input onChange={handleRangeChange} checked={selectedRange === '0-30'}value='0-30' type="radio" name="ques_range" className="tab" aria-label="高难题"/>
                </div>
                <div className="tabs tabs-box mr-4 font-bold">
                    <input onChange={handleTypeChange} checked={selectedType === ''} value='' type="radio" name="ques_type" className="tab" aria-label="所有"/>
                    <input onChange={handleTypeChange} checked={selectedType === '判断推理'} value='判断推理' type="radio" name="ques_type" className="tab" aria-label="判断推理"/>
                    <input onChange={handleTypeChange} checked={selectedType === '言语理解与表达'} value='言语理解与表达' type="radio" name="ques_type" className="tab" aria-label="言语理解与表达"/>
                </div>
                <span className="font-bold mr-2">难度倒序:</span>
                <input type="checkbox" onChange={handleDifficultyChange} checked={sortByDifficultyDesc === true} className="toggle toggle-xl" />

                <span className="font-bold mx-2">出题次数倒序:</span>
                <input type="checkbox" onChange={handleCountChange} checked={sortByCountDesc === true} className="toggle toggle-xl" />
            </div>

            <HomePageQuesList className="mx-auto"/>

            <div className="sticky bottom-0 bg-white h-14 flex items-center">
                <HomePagePagination className="mx-auto"/>
            </div>
        </div>

    );
}

export default HomePage